<template>
  <a-card class="userManageCard">
    <template #title>
      <h2>用户管理</h2>
    </template>
    <a-table
      size="middle"
      :dataSource="userList"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.key === 'photo'">
          <a-avatar :src="text" />
        </template>
        <template v-if="column.key === 'enabled'">
          <a-switch @click="fh(text)" :checked="!text.enabled" />
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import userApi from "@/apis/userApi";
import { computed, onMounted, ref } from "vue";

export default {
  name: "UserView",
  setup() {
    const userList = ref([]);
    const total = ref(0);
    const current = ref(1);
    const limit = ref(5);

    const pagination = computed(() => ({
      total: total.value,
      current: current.value,
      pageSize: limit.value,
    }));

    const handleTableChange = (pag) => {
      limit.value = pag.pageSize;
      current.value = pag.current;
      console.log(pag);
      getUserList(pag.current, pag.pageSize);
    };

    const getUserList = (current, limit) => {
      userApi.getUserList(current, limit).then((res) => {
        userList.value = res.userList;
        total.value = res.total;
      });
    };

    const fh = (user) => {
      userApi.updateEnabled(user.id, !user.enabled).then(() => {
        getUserList(current.value, limit.value);
      });
    };

    onMounted(() => {
      getUserList(current.value, limit.value);
    });

    return {
      pagination,
      userList,
      total,
      current,
      columns: [
        {
          title: "用户名",
          dataIndex: "username",
          key: "username",
        },
        {
          title: "头像",
          dataIndex: "photo",
          key: "photo",
        },
        {
          title: "注册时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "是否封禁",
          // dataIndex: "enabled",
          key: "enabled",
        },
        {
          title: "邮件",
          dataIndex: "email",
          key: "email",
        },
        {
          title: "电话",
          dataIndex: "iphone",
          key: "iphone",
        },
        {
          title: "ranting",
          dataIndex: "ranting",
          key: "ranting",
        },
      ],
      fh,
      handleTableChange,
    };
  },
};
</script>

<style scoped>
.userManageCard {
  width: 100%;
  height: 100%;
}
</style>